<template>
    <div class="border-colorful">
        <div class="single-color"
             v-for="(color, key) in btmcolor"
             :key="key"
             :class="{double: (key%2) !== 0}"
        >
        </div>
    </div>
</template>

<script>
    export default {
        name: "border-colorful",
        data(){
            return{
                btmcolor: [
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1', '#D12E2E',
                    '#2E68D1',
                ],// 创建订单地址栏底边色块
            }
        },
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .border-colorful{
        width 130%
        height vw(2)
        display flex
        flex-direction row
        overflow hidden
        .single-color{
            background-color #2E68D1
            width 4.5vw
            height vw(2)
            margin-right vw(9)
        }
        .double{
            background-color #D12E2E
        }
    }
</style>